/*  --------------------------------通用样式 start---------------------------------------- */

body {
  color: #000;
  font-family: 'Times New Roman', Times, serif;
}

a:hover {
  text-decoration: none !important;
}

ul .ol {
  list-style: none;
}

/* 自定义btn按钮----》将bootstrap中的一种按钮样式全部复制过来（注意是全部样式），修改该颜色成自己想要的即可 */

/* [class^="icon-"], [class*="icon-"] {
  font-family: 'cj';
  font-style: normal;
  font-size: 13px;
} */

/*设置注册图标颜色开始，下面的是从bootstrap.css中复制出来的，然后改编的，毕竟这种颜色的按钮还是没有的，需要自己定义，有一个网站可以定义这些图标样式，但是这个网站被拦截了（http://blog.koalite.com/bbg/），所以只能自己写了*/

.btn-cj {
  color: #FFFFFF;
  background-color: #0AB4F7!important;
  border-color: #F4F7F7;
}

.btn-cj:hover, .btn-cj:focus, .btn-cj:active, .btn-cj.active, .open .dropdown-toggle.btn-cj {
  color: #FFFFFF;
  background-color: #086DF2;
  border-color: #F4F7F7;
}

.btn-cj:active, .btn-cj.active, .open .dropdown-toggle.btn-cj {
  background-image: none;
}

.btn-cj.disabled, .btn-cj[disabled], fieldset[disabled] .btn-cj, .btn-cj.disabled:hover, .btn-cj[disabled]:hover, fieldset[disabled] .btn-cj:hover, .btn-cj.disabled:focus, .btn-cj[disabled]:focus, fieldset[disabled] .btn-cj:focus, .btn-cj.disabled:active, .btn-cj[disabled]:active, fieldset[disabled] .btn-cj:active, .btn-cj.disabled.active, .btn-cj[disabled].active, fieldset[disabled] .btn-cj.active {
  background-color: #0AB4F7;
  border-color: #F4F7F7;
}

.btn-cj .badge {
  color: #0AB4F7;
  background-color: #FFFFFF;
}

/* - --------------------------------通用样式 end----------------------------------------*/

/*  --------------------------------header start---------------------------------------- */

/* #webHeader {} */

#webHeader .top-bar {
  height: 40px;
  line-height: 39px;
  border-bottom: 1px solid #e0e0e0;
}

/* 获取到row下的第一个div的所有兄弟div，进行边框设置 */

#webHeader .top-bar .container .row>div+div {
  border-left: 2px solid #e0e0e0;
}

#webHeader .top-bar .container .row .top-bar-1 a {
  position: relative;
  /* 取消移入a标签时的下划线 */
  text-decoration: none;
}

#webHeader .top-bar .container .row .top-bar-1 a img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* 让图片显示在最上层，防止被遮盖 */
  z-index: 999;
  /* 因为在鼠标没有进入a标签时，要隐藏图片 */
  display: none;
  top: 20px;
}

/* 当鼠标移入a标签时，设置图片为block，显示图片 */

#webHeader .top-bar .container .row .top-bar-1 a:hover img {
  display: block;
}

/* 设置微信图标的样式 */

.zi_tmWeixin, .zi_phone {
  font-size: 20px;
}

/* 将top-bar-3中的a标签的颜色设置为 class="text-muted" ===》灰色 */

.top-bar-3 a {
  color: #6c757d !important;
}

/* 导航栏 */

.navber-cj {
  border-bottom: 1px solid #E0E0E0;
  padding: 0 1rem 0 0;
}

#webHeader .navber-cj .navbar-brand {
  height: 100px;
  margin-left: 15px;
  margin-right: 60px;
}

#webHeader .navber-cj .navbar-brand img {
  width: 130px;
  height: 100%;
}

#webHeader .navber-cj .navbar-nav li>a {
  height: 100px;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  /* 底边边框透明 */
  border-bottom: 2px solid transparent;
}

/* 鼠标移入a标签时，添加底边边框颜色 */

#webHeader .navber-cj .navbar-nav li>a:hover {
  border-bottom: 2px solid mediumpurple;
}

/* - --------------------------------header end----------------------------------------*/

/*  --------------------------------轮播图start----------------------------------------  */

/*
 * 1、屏幕宽度>=900px：轮播图div的height就是410px，这时候没有img，背景图片会居中，并且会尽全力铺满整个屏幕
 * 
 * 2、屏幕宽度<900px：轮播图div的height跟随宽度而定，这时候有img，它的width是100%，那会全力铺满整个屏幕，这时候高度随宽度而定
 * 
 * */

#web-carousel .carousel-item {
  /* 背景图片不重复，居中 */
  background: no-repeat center;
  /*把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。*/
  -webkit-background-size: cover;
  background-size: cover;
}

#web-carousel .carousel-item img {
  /* 如果不设置width:100% 那么图片将按照自己的宽度，高度来放置，
  例如一张图片宽度为2000px 高度为410px  如果没设置width: 100%;，则会占满410px的高度，而且因为其宽度大于电脑屏幕所以会显示的不完整
  如果设置了width: 100%; 那么图片的宽度就被限定的和电脑屏幕一样大，高度也会因此自动等比例缩小，图片就能显示完整，但高度不会再是410px了
  */
  width: 100%;
  /* 如果设定死高度，那图片随着宽度响应式缩小的时候，高度不会变化了 */
  /* height: 100px; */
}

/*如果是大图片作为背景，那就让div的高度等于410px；如果让小图当做div中的img，那就需要不需要*/

@media screen and (min-width: 900px) {
  #web-carousel .carousel-item {
    height: 410px;
  }
}

/*如果屏幕宽度大于等于768px，也就是平板宽度，那么轮播图两边的向左向右小按钮显示起来*/

@media screen and (min-width: 768px) {
  #prev {
    visibility: visible;
  }
  #prev {
    visibility: visible;
  }
}

/*如果屏幕宽度小于768px，也就是平板宽度，那么轮播图两边的向左向右小按钮隐藏起来*/

@media screen and (max-width: 768px) {
  #prev {
    visibility: hidden;
  }
  #next {
    visibility: hidden;
  }
}

/*  --------------------------------轮播图end----------------------------------------  */

/* --------------------------------热门start----------------------------------------  */

/* #webHot {} */

/* --------------------------------热门end----------------------------------------  */

/*  --------------------------------产品start----------------------------------------  */

/* #webProduct {} */

#webProduct {
  background-color: #f0f0f0;
  padding: 40px 0;
}

#webProduct .nav-tabs {
  font-size: 18px;
}

#webProduct .nav-tabs a {
  color: black;
  border: none;
  padding: 10px 20px;
  border-bottom: 2px solid transparent;
}

#webProduct .nav-tabs a:hover {
  background-color: transparent;
  border-bottom: 2px solid #8330F0;
  color: #8330F0;
}

#webProduct .nav-tabs a.active {
  background-color: transparent;
  border-bottom: 2px solid #8330F0;
  color: #8330F0;
}

#webProduct .tab-content {
  padding-top: 20px;
}

/*  --------------------------------产品end----------------------------------------  */

/*  --------------------------------关于我们start----------------------------------------  */

#webAbout {}

/*  --------------------------------关于我们end----------------------------------------  */

/*  --------------------------------友情链接start----------------------------------------  */

#webFriendLink {}

/*  --------------------------------友情链接end----------------------------------------  */

/* --------------------------------footer start----------------------------------------  */

/* #webFooter {} */

#webFooter {
  /*background-color: yellowgreen;*/
  width: 100%;
  height: 200px;
  background: url("../images/ft_bg.png") no-repeat center;
  color: #fff;
}

#webFooter .container .row {
  height: 200px;
}

#webFooter .container ul li a {
  color: #fff;
}

#webFooter .container ul li a:hover {
  text-decoration: underline;
}

/* --------------------------------footer end----------------------------------------  */